/**
 * Created by maxiaoqiang on 2018/9/10.
 */
import React, {Component} from "react";

import {Input, Select, Modal, Button, message, Spin} from 'antd';

const Option = Select.Option;
const { TextArea } = Input;

import "./index.less"
class CategoryComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            data: {
                id: "",
                name: "",
                status: "",
                note: ""
            }
        }
    }

    componentDidMount(){
        if(this.props.data){
            this.setState({
                data:this.props.data
            })
        }
    }

    handleChange=(name,value)=>{
        this.state.data[name] = value.trim();
    };


    saveHandel = ()=> {
        let data = this.state.data;
        if(data.name.length == 0){
            message.error("类别名称不能为空");
            return;
        }
        this.setState({
            loading:true
        });
        this.props.commitHandle(data);

    };

    render() {
        const data = this.state.data;
        return (
            <Modal
                visible={true}
                footer={null}
                closable={!this.state.loading}
                title={this.props.edit?"修改类别":"添加类别"}
                onCancel={()=>{this.props.handleCancel()}}
            >
                <div className="card-category">
                    <div>
                        类别名称:
                    </div>
                    <div>
                        <Input
                            defaultValue={data.name}
                            type="text"
                            placeholder="请输入类别名称"
                            onChange={(e)=>{this.handleChange("name",e.target.value)}}
                        />
                    </div>
                </div>
                <div className="card-category" style={{display:"none"}}>
                    <div>
                        是否可用:
                    </div>
                    <div>
                        <Select
                            defaultValue={data.status.toString()}
                            onChange={(value)=>{this.handleChange("status",value)}}
                        >
                            <Option value="0">是</Option>
                            <Option value="1">否</Option>
                        </Select>
                    </div>
                </div>
                <div className="card-category">
                    <div>
                        备注:
                    </div>
                    <div>
                        <TextArea
                            type="text"
                            placeholder="请输入描述或说明"
                            defaultValue={data.note}
                            onChange={(e)=>this.handleChange("note",e.target.value)}
                        />
                    </div>
                </div>
                <div className="submit-div">
                    <Button
                        loading={this.state.loading}
                        type="primary"
                        onClick={this.saveHandel}
                    >
                        {this.props.edit?"修改":"保存"}
                    </Button>
                </div>
            </Modal>
        )
    }

}

export default CategoryComponent;